<template>
    <div class="album-details">
        <nav-header>
                <template slot="menuBefore">
                <li><router-link to="/life/alumni/album-list" tag="a">相册管理</router-link></li>
                <li class="gap">&gt;</li>
            </template>
            <li v-if="this.$route.params.id">相册详情</li>
        </nav-header>

        <div class="zh-table" v-loading="loading.status" :element-loading-text="loading.txt">  
            <p class="photo-summary">
                 <span>相册名称：{{photosData.name}}</span>
                 <span>照片数量：{{photosData.pic_detail_count}}</span>
            </p>

            <div class="zh-open-left fl" v-if="photosData.status==2">
                <el-button type="primary"  @click="approve(photosData.id)">通过</el-button>
                <el-button type="danger"  @click="showReject">拒绝</el-button>
            </div>
            <br style="height:0;margin:0;"/>

            <ul class="clear" >
                <li v-for="(item,key) in photosData.pic_detail" :key="key" class="fl">
                    <img :src="BASE_URL+item.path" alt="相册里的图片" />
                </li>
            </ul>
        </div>
        <!-- 拒绝弹窗 -->
        <el-dialog
            title="拒绝"
            :visible.sync="rejectWin"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="40%"
            >
            <div class="textarea-box">
                <el-form :model="rejectForm"  ref="rejectForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="拒绝理由" prop="txt" :rules="[{max:100,message:''}]">
                    <el-input type="textarea" placeholder="输入拒绝理由（非必填）" v-model="rejectForm.txt" :maxlength="100" required></el-input>
                    </el-form-item>
                </el-form>
                <p class="str-num"><span v-text="rejectForm.txt.length"></span>/<span class="str-max">100</span></p>
            </div>
            <p class="tip">提示：拒绝将删除相册数据</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectWinHide">取 消</el-button>
                <el-button type="primary" @click="reject(photosData.id)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                // 加载数据时显示的信息和加载动画
                loading:{
                    status:false,
                    txt:'获取数据...',
                },
                photosData:'',     // 存放返回相册的图片列表
                rejectWin: false /*拒绝弹窗 */,
                rejectForm: {
                    txt: "" /*拒绝理由填写 */
                },
            }
        },
        created(){
            // console.log(this.$route.params)
            this.getList(this.$route.params.id)
        },
        methods:{
            // 获取相册详情列表
            getList(id){
                var listParam = {
                    id:id
                }

                // 显示加载动画
                this.loading.status = true;

                let success = (res=>{
                    // 隐藏加载动画
                    this.loading.status = false;

                    var data = res.data;

                    this.photosData = data;
                    console.log(deep_clone(data))
                })
                let fail = ( data => {
                    // 隐藏加载动画
                    this.loading.status = false;
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('api/alumni/alumniPic',{params: listParam,func:{success:success,fail:fail}})
            },
            // 通过审批的方法
            approve(id){
                // console.log("通过审批")
                let yes = ( data => {
                    // console.log('确定')
                    let params = {
                        id: id,    // 相册id
                        status: 1,    // 状态（1：通过；3：拒绝）
                    };
                    var success = res => {
                        this.$message.success(res.msg);
                        // 返回上一层
                        this.$router.back();
                    };
                    this.$ajax.put("api/alumni/alumniPicApprove", params, {func: { success: success }});
                })
                let cancel = ( data => {})
                this.e_confirm({yes:yes,cancel:cancel,txt:'确定通过 '+ this.photosData.name +' 的这个相册申请吗？'});
            }, 
            // 显示拒绝弹窗的方法
            showReject() {
                /*拒绝 */
                this.rejectWin = true;
            },
            // 确认拒绝的方法
            reject(id){
                // console.log('确认拒绝')
                let params = {
                    id: id,    // 相册id
                    status: 3,    // 状态（1：通过；3：拒绝）
                    comment: this.rejectForm.txt
                };
                // console.log(this.rejectForm.txt)

                var success = res => {
                    // 拒绝后删除相册
                    this.deleteAblum(params.id);
                };

                this.$ajax.put("api/alumni/alumniPicApprove", params, {func: { success: success }});
            },
            // 删除相册的方法
            deleteAblum(id){
                let success = ( data => {
                    this.$message.success(data.msg);
                    // 返回上一层
                    this.$router.back();
                });
                this.$ajax.delete('api/alumni/alumniPic',{params:{id:id},func:{success:success}})
            },
            // 隐藏拒绝弹窗
            rejectWinHide() {
                /*隐藏拒绝弹窗 */
                this.rejectWin = false;
                this.rejectForm.txt = "";
            },
        },
    }
</script>


<style lang="scss">
    .album-details{
        .zh-table{
            .photo-summary{
                span:last-child{
                    margin-left: 98px;
                }
            }
            .zh-open-left{
                // margin-top:42px;
            }
            ul{
                margin:42px 0 0;
                li{
                    position:relative;
                    margin:0 20px 18px 0;
                    width:360px;
                    height:240px;
                    overflow:hidden;
                    &>img{
                        width:100%;
                        height:100%;
                        object-fit:cover;
                    }
                }
            }

        }
        // 拒绝理由的样式
        .el-dialog__body{
            .textarea-box{
                position: relative;
                .el-textarea__inner {
                    min-height: 120px !important;
                    resize: none;
                }
                .str-num {
                    position: absolute;
                    padding: 0;
                    margin: 0;
                    left: 0;
                    bottom: 5px;
                    right: 15px;
                    text-align: right;
                    .str-max {
                        color: #ddd;
                    }
                }
            }
        }
        .tip{
                margin-left:16px;
            }
    }
</style>